<template>
    <div class="component-list" @dragstart="handleDragStart">
        <div
            v-for="(item, index) in componentList"
            :key="index"
            class="list"
            draggable
            :data-index="index"
        >
            <span class="iconfont" :class="'icon-' + item.icon"></span>
            <span>{{ item.label }}</span>
        </div>
    </div>
</template>

<script>
import componentList from '@/custom-component/component-list'

export default {
    data() {
        return {
            componentList,
        }
    },
    methods: {
        handleDragStart(e){
            // DataTransfer.setData(format,data) 方法用来设置拖放操作的drag data到指定的数据和类型。
            // format
            // 一个DOMString 表示要添加到 drag object的拖动数据的类型。
            // data
            // 一个 DOMString表示要添加到 drag object的数据。
            e.dataTransfer.setData("index",e.target.dataset.index)
            // index 0
        }
    },
}
</script>

<style scoped>
.component-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
}
.list{
    width: 45%;
    border: 1px solid #ddd;
    cursor: grab;
    margin-bottom: 10px;
    text-align: center;
    color: #333;
    padding: 2px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.list.active{
    cursor: grabbing;
}
.iconfont{
    margin-right: 4px;
    font-size: 20px;
}
.icon-wenben,
.icon-tupian{
    font-size: 18px;
}
</style>